<template>
  <div class="screen-container">
    <div class="screen-content">
      <!-- 在这里添加大屏内容 -->
      <div class="bigTime">
        <DeteTime />
      </div>
      <div class="address"></div>
      <div class="top_title"></div>
      <div class="main">
        <div class="main_l">
          <div class="box_1">
            <div class="box_title">人员签到分布</div>
            <div class="b1">
              <div class="b1_msg">
                <div class="b1_msg_nb">{{ data1.lineOnDutyCount }}</div>
              </div>
            </div>
            <div class="b2">
              <div class="b2_msg_nb_1">
                <div class="nb">{{ data1.fullTimeCount }}</div>
              </div>
              <div class="b2_msg_nb_2">
                <div class="nb">{{ data1.partTimeCount }}</div>
              </div>
            </div>
          </div>
          <div class="box_2">
            <div class="box_title">产线人员信息</div>
            <div style="width: 100%; background-color: #050b25; padding: 7px 0">
              <div class="tab_header">
                <div class="t1">所属产线</div>
                <div class="t2">姓名</div>
                <div class="t3">操作产品</div>
                <div class="t4">操作工序</div>
                <div class="t5">目标人效(件/时)</div>
              </div>
              <div class="scoll1">
                <Vue3SeamlessScroll
                  :step="0.17"
                  :list="data2"
                  :visibleCount="15"
                  ref="scrollRef"
                  @count="getUserList"
                >
                  <template v-slot="{ data }">
                    <span class="tab_box">
                      <div class="t1">{{ data.lineName }}</div>
                      <div class="t2">{{ data.employeeName }}</div>
                      <div class="t3">{{ data.productName }}</div>
                      <div class="t4">{{ data.processName }}</div>
                       <div class="t5">{{ data.targetEfficiency }}</div>
                    </span>
                  </template>
                </Vue3SeamlessScroll>
              </div>
            </div>
          </div>
        </div>
        <div class="main_m">
          <div class="nbs">
            <div class="s1">{{ data.todayTaskTotal }}</div>
            <div class="s2">{{ data.todayTaskConnt }}</div>
          </div>
          <div class="nbs2">
            <div class="box-nb-1">{{ data.todayTaskCompleted }}</div>
<!--            <div class="box-nb-2">{{ data.completionTotal }}</div>-->
            <div class="box-nb-2">{{ data.completionQualified }}</div>
            <div class="box-nb-3">
              {{ data.defectiveTotal }}
            </div>
          </div>

          <div class="b1">
            <div class="box_title">当日生产计划</div>
            <div style="width: 100%; background-color: #050b25; padding: 7px 0">
              <div class="tab_header">
                <div class="t1">所属产线</div>
                <div class="t2">产品名称</div>
                <div class="t3">生产线长</div>
                <div class="t4">目标产值</div>
                <div class="t5">完成状态</div>
                <div class="t6">目标人数</div>
                <div class="t7">实际人数</div>
                <div class="t8">目标人效</div>
                <div class="t9">实际人效</div>
              </div>
              <div class="scoll1 scoll2">
                <Vue3SeamlessScroll
                  :visibleCount="6"
                  :step="0.08"
                  :list="data4"
                  ref="scrollRef2"
                >
                  <template v-slot="{ data }">
                    <span class="tab_box">
                      <div class="t1">{{ data.lineName }}</div>
                      <div class="t2">{{ data.productName }}</div>
                      <div class="t3">{{ data.employeeName }}</div>
                      <div class="t4 gree">{{ data.planQuantity }}</div>
                      <div
                        :class="{
                          t5: true,
                          red: data.status === '0',
                          gree: data.status === '1',
                        }"
                      >
                        {{ filtersStatus(data.status) }}
                      </div>
                      <div class="t6">{{ data.targetWorkers }}</div>
                      <div class="t7">{{ data.status === '0' ? '-' : data.workerCount }}</div>
                      <div class="t8">{{ data.targetEfficiency }}</div>
                      <div class="t9">{{ data.status === '3'  ? data.taskEfficiency : '-'}}</div>
                    </span>
                  </template>
                </Vue3SeamlessScroll>
              </div>
            </div>
          </div>
          <div class="b1 b2">
            <div class="box_title">当日生产进行中</div>
            <div style="width: 100%; background-color: #050b25; padding: 7px 0">
              <div class="tab_header">
                <div class="t1">所属产线</div>
                <div class="t2">生产线长</div>
                <div class="t3">操作产品</div>
                <div class="t4">目标产值</div>
                <div class="t5">目标人数</div>
                <div class="t6">实际人数</div>
                <div class="t7">目标人效</div>
                <div class="t8">开始时间</div>
              </div>
              <div class="scoll1 scoll2">
                <Vue3SeamlessScroll
                  :visibleCount="6"
                  :step="0.17"
                  :list="data8"
                  ref="scrollRef3"
                >
                  <template v-slot="{ data }">
                    <span class="tab_box">
                      <div class="t1">{{ data.lineName }}</div>
                      <div class="t2">{{ data.employeeName }}</div>
                      <div class="t3">{{ data.productName }}</div>
                      <div class="t4 red">{{ data.planQuantity }}</div>
                      <div class="t5 red">{{ data.targetWorkers }}</div>
                      <div class="t6 gree">{{ data.workerCount }}</div>
                       <div class="t7 red">{{ data.targetEfficiency }}</div>
                      <div class="t8 yellow">{{ data.actualStartTime }}</div>
                    </span>
                  </template>
                </Vue3SeamlessScroll>
              </div>
            </div>
          </div>
        </div>
        <div class="main_r">
          <div class="b1">
            <div class="box_title">不良品前十项汇总分析</div>
            <div
              style="
                width: 100%;
                background-color: #050b25;
                padding: 7px 0;
                height: 245px;
              "
            >
              <Ring v-if="data6 && data6.length" :xAxisData="data6" :seriesData="data7"></Ring>
            </div>
          </div>
          <div class="b1 b2">
            <div class="box_title">覆膜任务</div>
            <div style="width: 100%; background-color: #050b25; padding: 7px 0">
              <div class="tab_header">
                <div class="t1">来源产线</div>
                <div class="t2">生产产品</div>
                <div class="t3">完成状态</div>
                <div class="t4">任务数量</div>
                <div class="t5">合格量</div>
                <div class="t6">瑕疵量</div>
              </div>
              <div class="scoll1 scoll2">
                <Vue3SeamlessScroll
                  :visibleCount="6"
                  :step="0.17"
                  :list="data9"
                  ref="scrollRef4"
                >
                  <template v-slot="{ data }">
                    <span class="tab_box">
                      <div class="t1">{{ data.taskCode }}</div>
                      <div class="t2">{{ data.productName }}</div>
                      <div
                        :class="{
                          t3: true,
                          gree: data.status === '已完成',
                          yellow: data.status === '进行中',
                          red: data.status !== '进行中',
                        }"
                      >
                        {{ data.status }}
                      </div>
                      <div class="t4">{{ data.planQuantity }}</div>
                      <div class="t5">{{ data.status === '已完成'  ? data.qualifiedQuantity : '-'}}</div>
                      <div class="t6">{{ data.status === '已完成'  ?  data.completedQuantity : '-'}}</div>
                    </span>
                  </template>
                </Vue3SeamlessScroll>
              </div>
            </div>
          </div>
          <div class="b1 b2 b3">
            <div class="box_title">异常上报</div>
            <div style="width: 100%; background-color: #050b25; padding: 7px 0">
              <div class="tab_header">
                <div class="t1">异常类别</div>
                <div class="t2">上报源</div>
                <div class="t3">处理状态</div>
                <div class="t4">上报时间</div>
              </div>
              <div class="scoll1 scoll2">
                <Vue3SeamlessScroll
                  :visibleCount="6"
                  :step="0.1"
                  :list="data10"
                  ref="scrollRef5"
                >
                  <template v-slot="{ data }">
                    <span
                      :class="{
                        tab_box: true,
                        red: data.processStatus === '未处理',
                        gree: data.processStatus === '已处理',
                      }"
                    >
                      <div class="t1">{{ data.abnormalType }}</div>
                      <div class="t2">{{ data.reporter}}</div>
                      <div
                        :class="{
                          t3: true,
                        }"
                      >
                        {{ data.processStatus }}
                      </div>
                      <div class="t4">{{ data.reportTime }}</div>
                    </span>
                  </template>
                </Vue3SeamlessScroll>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Vue3SeamlessScroll from "./Vue3SeamlessScroll.vue";
import DeteTime from "./deteTime.vue";
import { ref, onMounted, onUnmounted } from "vue";
import {
  getPersonnel,
  userList,
  taskPlan,
  defectAnalysis,
  homeStatistics,
  runningTaskPlan,
  filmTasks,
  errorList,
} from "./../api/index";
import Ring from "./ring.vue";
const count = ref(0);
const data = ref({
  staffTotal: null,
  staffFullTime: null,
  staffPartTime: null,
  onDutyTotal: null,
  onDutyFullTime: null,
  onDutyPartTime: null,
  todayTaskTotal: null,
  todayTaskCompleted: null,
  todayTaskInProgress: null,
  todayTaskNotStarted: null,
  completionTotal: null,
  todayTaskConnt: null,
  defectiveTotal: null,
  completionQualified: null,
});
// 定时器引用
let personnelTimer = null;
let otherTimer = null;
const filtersStatus = (status) => {
  switch (status) {
    case "1":
      return "进行中";
    case "0":
      return "未开始";
    case "3":
      return "已完成";
    default:
      return "";
  }
};
const filtersStatus2 = (status) => {
  switch (status) {
    case "1":
      return "进行中";
    case "0":
      return "未开始";
    case "3":
      return "已完成";
    default:
      return "";
  }
};
const data1 = ref({
  lineOnDutyCount: null,
  fullTimeCount: null,
  partTimeCount: null,
});
const scrollRef = ref(null);
const scrollRef2 = ref(null);
const scrollRef3 = ref(null);
const scrollRef4 = ref(null);
const scrollRef5 = ref(null);
const data2 = ref([]);
const data3 = ref();
const data4 = ref([]);
const data5 = ref([]);
const data6 = ref([]);
const data7 = ref([]);
const data8 = ref([]);
const data9 = ref([]);
const data10 = ref([]);
// 动态调整缩放比例
const adjustScale = () => {
  const container = document.querySelector(".screen-container");
  if (container) {
    const width = window.innerWidth;
    const height = window.innerHeight;
    const scale = width / 1920;
    if (scale < 1) {
      container.style.transform = `scale(${1})`;
      container.style.transformOrigin = "top left";
      container.style.width = "1920px";
      container.style.height = "1080px";
      return;
    }
    container.style.transform = `scale(${scale})`;
    container.style.transformOrigin = "top left";
    container.style.width = "1920px";
    container.style.height = "1080px";
  }
};

const getPersonnelData = async () => {
  const res = await getPersonnel();
  if (res.code === 200) {
    data1.value = res.data;
  } else {
    console.error("getPersonnel失败", res.msg);
  }
};
const editSeamlessScrollRef = (seamlessScrollRef,data)=>{
  seamlessScrollRef.value.remove(0,seamlessScrollRef.value.targetList.length)
  setTimeout(() => {
    seamlessScrollRef.value.add(0, data);
  });
};
const getUserList = async () => {
  const res = await userList();
  if (res.code === 200) {
    data2.value = res.data;
  } else {
    console.error("getUserList失败", res.msg);
  }

  // scrollRef.value.reset();
  // setTimeout(() => {
  //   scrollRef.value.add(0, data2.value);
  // });
  editSeamlessScrollRef(scrollRef,data2.value)
};
const getTaskPlan = async () => {
  const res = await taskPlan();
  console.log("res", res);
  if (res.code === 200) {
    data4.value = res.rows;
  } else {
    console.error("getTaskPlan失败", res.msg);
  }
  // scrollRef2.value.reset();
  // setTimeout(() => {
  //   scrollRef2.value.add(0, data4.value);
  // });
  editSeamlessScrollRef(scrollRef2,data4.value)
};
const getDefectAnalysis = async () => {
  const res = await defectAnalysis();
  console.log("res", res);
  if (res.code === 200) {
    data6.value = res.data?.map((item) => item.name);
    data7.value = res.data?.map((item) => {
      return {
        value: item.value,
        name: item.name,
      };
    });
    
    console.log("data7", data7.value);
  } else {
    console.error("getDefectAnalysis失败", res.msg);
  }
};
const getHomeStatistics = async () => {
  const res = await homeStatistics();
  if (res.code === 200) {
    let resData = res.data;
    resData.todayTaskTotal = resData.todayTaskTotal + "";
    resData.todayTaskConnt = resData.todayTaskConnt + "";
    if (resData.todayTaskTotal.length < 2) {
      resData.todayTaskTotal = "0" + resData.todayTaskTotal;
    }
    let length0 = {
      0: "00000",
      1: "0000",
      2: "000",
      3: "00",
      4: "0",
    };
    if (resData.todayTaskConnt.length < 5) {
      resData.todayTaskConnt =
        length0[resData.todayTaskConnt.length] + resData.todayTaskConnt;
    }
    data.value = resData;
  } else {
    console.error("getDefectAnalysis失败", res.msg);
  }
};
const getRunningTask = async () => {
  const res = await runningTaskPlan();
  if (res.code === 200) {
    data8.value = res.rows;
    console.log("data", data8);
  } else {
    console.error("getDefectAnalysis失败", res.msg);
  }

  // scrollRef3.value.reset();
  // setTimeout(() => {
  //   scrollRef3.value.add(0, data8.value);
  // });
  editSeamlessScrollRef(scrollRef3,data8.value)
};
const getFilmTasks = async () => {
  const res = await filmTasks();
  if (res.code === 200) {
    data9.value = res.data;
    console.log("data9", res);
  } else {
    console.error("getDefectAnalysis失败", res.msg);
  }

  // scrollRef4.value.reset();
  // setTimeout(() => {
  //   scrollRef4.value.add(0, data9.value);
  // });
  editSeamlessScrollRef(scrollRef4,data9.value)
};
const getErrorList = async () => {
  const res = await errorList();
  if (res.code === 200) {
    data10.value = res.data;
    console.log("data10", res);
  } else {
    console.error("getErrorList失败", res.msg);
  }

  // scrollRef5.value.reset();
  // setTimeout(() => {
  //   scrollRef5.value.add(0, data10.value);
  // });
  editSeamlessScrollRef(scrollRef5,data10.value)
};

onMounted(() => {
  adjustScale();
  window.addEventListener("resize", adjustScale);
  getHomeStatistics();
  getPersonnelData();
  getUserList();
  getTaskPlan();
  getDefectAnalysis();
  getRunningTask();
  getFilmTasks();
  getErrorList();
  personnelTimer = window.setInterval(() => {
    getPersonnelData();
  }, 2 * 60 * 1000);

  // 1分钟执行一次其他接口（除 getUserList）
  otherTimer = window.setInterval(() => {
    getHomeStatistics();
    getTaskPlan();
    getUserList();
    getDefectAnalysis();
    getRunningTask();
    getFilmTasks();
    getErrorList();
  }, 60 * 1000);
});
onUnmounted(() => {
  window.removeEventListener("resize", adjustScale);

  if (personnelTimer !== null) {
    clearInterval(personnelTimer);
    personnelTimer = null;
  }
  if (otherTimer !== null) {
    clearInterval(otherTimer);
    otherTimer = null;
  }
});
</script>

<style scoped lang="less" src="./../assets/home.less"></style>
